<template>
  <div class="tabber">
    <ul>
<!--     custom 定制 v-slot 插槽 解构出来状态值-->
      <router-link custom to="/films"  v-slot="{isActive,navigate }">
        <li :class="isActive ? 's-select' : '' " @click="navigate">电影</li>
      </router-link>
      <router-link custom to="/cinemas"  v-slot="{isActive,navigate }">
        <li :class="isActive ? 's-select' : '' " @click="navigate">影院</li>
      </router-link>
      <router-link custom to="/center"  v-slot="{isActive,navigate }">
        <li :class="isActive ? 's-select' : '' " @click="navigate">我的</li>
      </router-link>
    </ul>
  </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
.tabber{
  position: fixed;
  bottom:0;
  width: 100%;
  height:50px;
  line-height: 50px;
  text-align: center;
  background: #fff;
  ul{
    display: flex;
    li{
      flex: 1;
    }
  }
  .s-select{
    color:#f6574a;
  }
}
</style>
